<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        width: '100%',
        height: statusBarHeight + 'px',
        background: 'white',
        position: 'fixed',
        top: 0,
        zIndex: 100,
      }"
    >
    </view>
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">{{ list[type].title }}</view>
    </view>
    <view class="box" :style="{ marginTop: statusBarHeight + 'px' }">
      <view class="box_bg">
        <view class="bg_title">
          {{ list[type].title }}
        </view>
        <view class="bg_text">
          <!-- 生生云书院“修身昆仑 行者系统” -->
          {{ list[type].text }}
        </view>
      </view>
      <view class="box_text">
        <view class="text1">
          <!-- 生生云书院为了更好地帮助同学们落地实践所学，降重推出”修身昆仑 行者系统”。 -->
          {{ list[type].text1 }}
        </view>
        <view class="text2">
          {{ list[type].text2 }}
          <!-- 同学们可根据自己的特长、天性与愿力，选择未来精进的生命道路与方向: 行者、创者、化者中的某一个方向、某两个方向或三个方向。 -->
        </view>
      </view>
      <!--  -->
      <!-- v-if="formList.length" -->
      <template v-if="isForm">
        <!-- <view></view> -->
        <form-box
          :formList="formList"
          :rules="rules"
          :model="model1"
          :id="id"
          :type="type"
          @upload="upload"
          @address="address"
        ></form-box>
      </template>
    </view>
  </view>
</template>

<script>
import formBox from "./components/formBox.vue";
import { problem_type } from "@/common/api/problem.js";
export default {
  components: {
    formBox,
  },
  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      type: 0,
      list: [
        {
          url: "../../static/images/certification/pic_xzrzb_top.png",
          title: "行者认证表",
          text: "生生云书院“文创昆仑 创者系统”",
          text1:
            "生生云书院为了更好地帮助同学们落地实践所学，降重推出”修身昆仑 行者系统”。",
          text2:
            "同学们可根据自己的特长、天性与愿力，选择未来精进的生命道路与方向: 行者、创者、化者中的某一个方向、某两个方向或三个方向。",
        },
        {
          url: "../../static/images/certification/pic_czrzb_top.png",
          title: "创者认证表",
          text: "生生云书院“问道昆仑 化者系统”",
          text1:
            "生生云书院为了更好地帮助大家落地实践所学，隆重推出“问道昆仑 化者系统”。",
          text2:
            "大家可根据自己的特长、天性与愿力，选择未来精进的生命道路与方向：行者、创者、化者中的某一个方向、某两个方向或三个方向。",
        },
        {
          url: "../../static/images/certification/pic_hzrzb_top.png",
          title: "化者认证表",
          text: "生生云书院“问道昆仑 化者系统”",
          text1:
            "生生云书院为了更好地帮助大家落地实践所学，隆重推出“问道昆仑 化者系统”。",
          text2:
            "大家可根据自己的特长、天性与愿力，选择未来精进的生命道路与方向：行者、创者、化者中的某一个方向、某两个方向或三个方向。",
        },
        {
          url: "../../static/images/certification/pic_sssyzyzzm_top.png",
          title: "生生书院志愿者招募",
          text: "生生书院志愿招慕：包括辅导员、编辑、摄像、摄影、剪辑、管理员等申请",
          text1: "",
          text2: "",
        },
        {
          url: "../../static/images/certification/pic_hzrzb_top.png",
          title: "生生书院 中华易道院 起名",
          text: "请静心填写",
          text1: "",
          text2: "",
        },
        {
          url: "../../static/images/certification/pic_sssyzyzzm_top.png",
          title: "应聘编辑岗位调研问卷",
          text: "感谢您申请我们的编辑岗位，我们想了解您是如何写一篇文章的。因此有一个调查问卷",
          text1: "",
          text2: "",
        },
        {
          url: "../../static/images/certification/pic_sssyzyzzm_top.png",
          title: "应聘书院职位",
          text: "",
          // text: "负责短视频创意剪辑、参与短视频拍摄等工作，管理视频后台并分析后台数据",
          text1: "",
          text2: "",
        },
      ],
      formList: [],
      rules: {},
      model1: {},
      isForm: false,
      id: "",
    };
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
    this.statusBarHeight = statusBarHeight.statusBarHeight;
    const windowHeihgt = statusBarHeight.windowHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
        })
        .exec();
    });
  },
  onLoad(options) {
    if (options && options.type) {
      this.id = options.id;
      this.type = options.type - 1;
      this.getList();
    }
  },
  methods: {
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    getList() {
      let list = [];
      problem_type({
        type: this.type + 1,
      }).then((res) => {
        console.log("ressssss", res.data.problem.problem);
        const problem = res.data.problem.problem;
        problem.forEach((item) => {
          if (item.type == "input_address") {
            list.push({
              type: item.type,
              placeholder: item.p,
              required: item.required ? true : false,
              label: item.name,
              value: item.filed,
              inpType: item.input ? item.input : null,
              selectList: item.value ? item.value : null,
            });
            this.rules["address"] = {
              type: "string",
              required: true,
              message: item.p,
              trigger: ["blur", "change"],
            };
          } else {
            list.push({
              type: item.type,
              placeholder: item.p,
              required: item.required ? true : false,
              label: item.name,
              value: item.filed,
              inpType: item.input ? item.input : null,
              selectList: item.value ? item.value : null,
            });
            if (item.type == "checkbox") {
              this.rules[item.filed] = {
                type: "array",
                min: 1,
                required: true,
                message: item.p,
                trigger: ["blur", "change"],
              };
            } else {
              this.rules[item.filed] = {
                type: "string",
                min: 1,
                required: true,
                message: item.p,
                trigger: ["blur", "change"],
              };
            }
          }

          if (item.type == "input_address") {
            let value = item.filed.split(",");
            for (let i = 0; i < value.length; i++) {
              console.log("valuevalue", value[i]);
              this.model1[value[i]] = "";
            }
          } else if (item.type == "checkbox") {
            this.model1[item.filed] = [];
          } else {
            this.model1[item.filed] = "";
          }
        });
        this.formList = list;
        this.isForm = true;
        console.log("listlist", list, this.model1, this.rules);
      });
    },
    upload(e) {
      console.log("eeeeee", e);
      this.model1.problem12 = e;
    },
    address(e) {
      console.log("eeeeeeaddresss", e, this.model1);
      this.model1.province_id = e.province_id;
      this.model1.city_id = e.city_id;
      this.model1.district_id = e.district_id;
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
}

.head {
  width: 100%;
  padding: 18rpx 0 47rpx;
  position: fixed;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  z-index: 99;

  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444;
  }
}

.box {
  padding: 0 30rpx;
  box-sizing: border-box;

  .box_bg {
    width: 100%;
    height: 226rpx;
    box-sizing: border-box;
    background: url("/static/images/certification/pic_xzrzb_top.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .bg_title {
      font-size: 32rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }

    .bg_text {
      width: 504rpx;
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-top: 12rpx;
      text-align: center;
    }
  }

  .box_text {
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #444444;
    margin-top: 40rpx;

    .text1 {
    }

    .text2 {
      margin-top: 30rpx;
    }
  }
}
</style>
